// API 基础地址
const apiUrl = "http://localhost:8083/api/student/learning";  // 后端接口地址，替换为实际的地址

// 页面加载时获取数据
document.addEventListener('DOMContentLoaded', function () {
  loadCourses();  // 加载课程数据
  loadHomework(); // 加载作业数据
  loadGrades();   // 加载成绩数据
});

// 获取我的课程数据
function loadCourses() {
  const pageNum = 1;
  const pageSize = 10;

  fetch(`${apiUrl}/courses?pageNum=${pageNum}&pageSize=${pageSize}`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    }
  })
  .then(response => response.json())
  .then(data => {
    if (data.code === 200) {
      renderCourses(data.data.records);  // 渲染课程数据
    } else {
      alert('加载课程数据失败');
    }
  })
  .catch(error => {
    console.error('Error fetching course data:', error);
    alert('加载课程数据失败');
  });
}

// 渲染课程数据到表格
function renderCourses(courses) {
  const tableBody = document.getElementById('course-table').getElementsByTagName('tbody')[0];
  tableBody.innerHTML = ''; // 清空表格内容
  courses.forEach((course, index) => {
    const row = tableBody.insertRow();
    row.innerHTML = `
      <td>${course.name}</td>
      <td>${course.progress}%</td>
      <td>
        <ul>
          ${course.units.map(unit => `<li>${unit.title} <span class="unit-status">${unit.status}</span></li>`).join('')}
        </ul>
      </td>
      <td>
        <button onclick="viewCourseDetails(${index})">查看详情</button>
      </td>
    `;
  });
}

// 查看课程详情
function viewCourseDetails(courseIndex) {
  window.location.href = `unit-details.html?course=${courseIndex}`;
}

// 获取作业数据
function loadHomework() {
  const pageNum = 1;
  const pageSize = 10;

  fetch(`${apiUrl}/homework?pageNum=${pageNum}&pageSize=${pageSize}`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    }
  })
  .then(response => response.json())
  .then(data => {
    if (data.code === 200) {
      renderHomework(data.data.records);  // 渲染作业数据
    } else {
      alert('加载作业数据失败');
    }
  })
  .catch(error => {
    console.error('Error fetching homework data:', error);
    alert('加载作业数据失败');
  });
}

// 渲染作业数据到表格
function renderHomework(homework) {
  const tableBody = document.getElementById('homework-table').getElementsByTagName('tbody')[0];
  tableBody.innerHTML = ''; // 清空表格内容
  homework.forEach(item => {
    const row = tableBody.insertRow();
    row.innerHTML = `
      <td>${item.name}</td>
      <td>${item.dueDate}</td>
      <td>${item.status}</td>
      <td><button onclick="viewHomeworkDetails('${item.name}')">查看作业</button></td>
    `;
  });
}

// 查看作业详情
function viewHomeworkDetails(homeworkName) {
  alert(`查看作业详情: 作业名称 ${homeworkName}`);
}

// 获取成绩数据
function loadGrades() {
  const pageNum = 1;
  const pageSize = 10;

  fetch(`${apiUrl}/grades?pageNum=${pageNum}&pageSize=${pageSize}`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    }
  })
  .then(response => response.json())
  .then(data => {
    if (data.code === 200) {
      renderGrades(data.data.records);  // 渲染成绩数据
    } else {
      alert('加载成绩数据失败');
    }
  })
  .catch(error => {
    console.error('Error fetching grades data:', error);
    alert('加载成绩数据失败');
  });
}

// 渲染成绩数据到表格
function renderGrades(grades) {
  const tableBody = document.getElementById('grades-table').getElementsByTagName('tbody')[0];
  tableBody.innerHTML = ''; // 清空表格内容
  grades.forEach(item => {
    const row = tableBody.insertRow();
    row.innerHTML = `
      <td>${item.course}</td>
      <td>${item.grade}</td>
    `;
  });
}

// 模拟查看详情
function viewUnitDetails(unitId) {
  alert(`查看学习单元详情: 单元 ID ${unitId}`);
}
